<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>定位</title>
    <style>
        body{
            height: 2500px;
        }
        .box{
            width: 150px;
            height: 150px;
            outline: 1px soli red;
        }
        .b1{
            background-color: rgb(30, 126, 81);
            /* 给元素开启相对定位 */
            position: relative;

        }
        .b2{
            background-color: rgb(212, 212, 161);
            position: relative;
            left: 20px;
            /* top:-10px */
            bottom:10px;
        }
        .b3{
            background-color: rgb(163, 175, 52);
        }
        /* --------绝对定位--------- */
        .b{
            padding:25px;
            outline: 1px solid red;
            
        }
        .box1{
            background-color: rgb(186, 206, 139);
            width: 300px;
            height: 400px;
            /* position: relative; */
        }
        .box2{
            background-color: rgb(139, 206, 145);
            width: 250px;
            height: 300px;
            /* position: relative; */
        }
        .box3{
            background-color: rgb(139, 206, 165);
            width: 200px;
            height: 200px;
            position: relative;
        }
        .box4{
            background-color: rgb(139, 170, 206);
            height: 100px;
            width: 100px;
            position: absolute;
            right: 0;
            bottom: 0;
            /* left:10px;
            top: 100px; */
        }
        .s1{
            background-color: rgb(229, 168, 168);
            width: 100px;
            height: 100px;
            position: absolute;
            right: 50px;
            bottom: 50px;
            z-index: 1;
        }
        .mybox{
            width: 100px;
            height: 200px;
            background-color: rgb(198, 248, 203);
            position: fixed;
            right: 10px;
            bottom: 100px;
        }
        .g1{
            background-color: rgb(224, 175, 175);
            width: 200px;
            height: 200px;
            position: relative;
            left: 20px;
            bottom: 150px;
            z-index: 9999;
        }
    </style>
</head>
<body>
    <h2>相对定位</h2>
    <!-- 相对定位：
    1.以自己未定位前的位置为基准进行定位 
    2.相对定位不会脱离文档流，之前的位置还会被保留
    3.定位的方向x轴left,right。y轴方向top,bottom。
    4.最终定位的地方用方向取反。
    5.元素的显示属性不发生变化
-->
    <div class="box b1">b1</div>
    <div class="box b2">b2</div>
    <div class="box b3">b3</div>
    <h2>绝对定位</h2>
    <!-- 绝对定位
    1.沿着自己的直系向上找，找到第一个开启定位的元素，也就是有position属性的元素，然后以该元素为基准进行定位。
    如果一直没有找到，则会以html为基准进行定位。
    2.绝对定位会脱离文档流。
    3.left是该元素左边到基准元素的左边的距离，同理right，top,bottom也是如此。
    4.元素绝对定位之后显示属性会变成块级元素。
    5.元素层级比标准文档流要高，默认+1，会显示在标准文档流的上面

    -->
    <div class="box1 b">
        box1
        <div class="box2 b ">
                box2
            <div class="box3c"></div>
            <div class="box3 b ">
                <span class="s1">box4上面的文字 s1</span>
                <div class="box4 box2">
                    box4
                </div>
               
                <span>box4下面的文字</span>
            </div>
        </div>
    </div>
    <h2>固定定位</h2>
    <!-- 固定定位
    1.以浏览器视窗作为基础进行定位，不会随着页面内容的移动而移动。
    2.方向同绝对定位
    3.脱离文档流
    4.元素会变成块级元素
 -->
    <span class="g1">固定定位上边的</span>
    <div class="mybox">
        固定定位
    </div>
    <span class="g2">固定定位下边的</span>
</body>
</html>